<template>
  <div class="demo">
    <div class="demo-box">
      <div>
        <h3>竖直 - 左轴</h3>
        <timeline line-position="left" direction="vertical" fill-parent fill-node>
          <timeline-item v-for="i in length" :key="i" :time="time" :title="getTitle(i)" :node="`${i}-${i}`"
                           :content="getContent(i)"/>
        </timeline>
      </div>
      <div>
        <h3>竖直 - 中轴</h3>
        <timeline line-style="dotted" line-position="center" direction="vertical"
                    fill-parent node-shape="rect" show-endline>
          <timeline-item v-for="i in length" :key="i" :time="time" :title="getTitle(i)"
                           :position="i % 2 ? 'left' : 'right'" :content="getContent(i)"/>
        </timeline>
      </div>
      <div>
        <h3>竖直 - 右轴</h3>
        <timeline line-style="dashed" line-position="right" fill-parent direction="vertical">
          <timeline-item v-for="i in length" :key="i" :time="time" :title="getTitle(i)"
                           :content="getContent(i)"/>
        </timeline>
      </div>
    </div>
    <div class="demo-box">
      <div>
        <h3>竖直 - 左轴 - 时间放在一侧</h3>
        <timeline line-position="left" direction="vertical" time-aside>
          <timeline-item v-for="i in length" :key="i" :time="time" :title="getTitle(i)">{{ getContent(i) }}
          </timeline-item>
        </timeline>
      </div>
      <div>
        <h3>竖直 - 中轴 - 时间放在一侧</h3>
        <timeline line-position="center" direction="vertical" node-shape="rect" time-aside>
          <timeline-item v-for="i in length" :key="i" :time="time" :title="getTitle(i)"
                           :position="i % 2 ? 'left' : 'right'">
            {{ getContent(i) }}
          </timeline-item>
        </timeline>
      </div>
      <div>
        <h3>竖直 - 右轴 - 时间放在一侧</h3>
        <timeline line-position="right" direction="vertical" time-aside>
          <timeline-item v-for="i in length" :key="i" :time="time" :title="getTitle(i)">{{ getContent(i) }}
          </timeline-item>
        </timeline>
      </div>
      <div>
        <h3>竖直 - 左轴 - 自定义节点</h3>
        <timeline line-position="left" direction="vertical" time-aside>
          <timeline-item v-for="i in 4" :key="i" :time="time" :title="getTitle(i)">
            <span class="custom-content" :style="{border: `1px solid ${colors[i]}`}">{{ getContent(i) }}</span>
            <template v-slot:node>
              <span class="custom-node">
                <span class="custom-node--content" :style="{backgroundColor: colors[i]}"/>
              </span>
            </template>
            <template v-slot:time>
              <span :style="{color: colors[i], fontWeight: 'normal'}">{{ time }}</span>
            </template>
          </timeline-item>
        </timeline>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data() {
    return {
      length: 3,
      time: new Date().toLocaleString(),
      colors: [
        '',
        'orange',
        'red',
        'green',
        'lightblue'
      ]
    }
  },
  methods: {
    getTitle(v) {
      return '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题' + v
    },
    getContent(v) {
      return '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容' + v
    }
  }
}
</script>

<style lang="less" scoped>
.demo-box {
  /*display: grid;*/
  /*grid-template-columns: 25% auto 25%;*/

  > div {
    border-top: 1px solid #888888;
  }
}

.custom-node {
  display: block;
  box-sizing: border-box;
}

.custom-content {
  padding: 10px 20px;
}

.custom-node--content{
  display: inline-block;
  width: 18px;
  height: 18px;
}
</style>
